<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>用户登录</title>
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript" src="js/pagination.js"></script>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/axios.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
		<script type="text/javascript" src="js/dcalendar.picker.js"></script>
		<script src="./js/validate.js"></script>
	
		<link rel="stylesheet" href="css/bootstrap.css">
		<link rel="stylesheet" href="css/dcalendar.picker.css">
	</head>
	<body>
		
		<div id="app" >
			
			<div class="mysign" style="text-align: center">
				<div class="col-lg-11r text-info">
					<h2>请登录</h2>
				</div>
				<div class="col-lg-8" style="margin-left:250px">
					<input type="text" name="username" class="form-control" v-model="user.username" placeholder="请输入账户名" required />
				</div>
				<div class="col-lg-8" style="margin-left:250px">
					<input type="password" class="form-control" name="password" v-model="user.password" placeholder="请输入密码" required />
				</div>
				<div class="col-lg-8" style="margin-left:250px">
					<button type="button" class="btn btn-primary" @click="register2">手机号登录</button>
					<button type="button" class="btn btn-primary" @click="login">登录</button>
					<button type="button" class="btn btn-primary" @click="register">注册</button>
				</div>
			</div>
			
			<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-body registerArea">
							<div class="form-group" style="text-align: center;">
								<label>
									<h2>注册用户</h2>
								</label>
							</div>
							<div class="form-group">
								<label for="username">用户名</label>
								<div class="controls">
									<input type="text" class="form-control" id="username" name="username" v-model.lazy="user2.username"  
									data-vv-as="用户名" v-validate="'required|alpha_dash|min:4|max:30'">
								</div>
								<span style="color: red;">{{ errors.first('username') }}</span>
							</div>
							<div class="form-group">
								<label for="password">密码</label>
								<div class="controls">
									<input type="password" class="form-control" id="password" name="password" v-model="user2.password"  
									data-vv-as="密码"  v-validate="'required|alpha_dash|min:4|max:30'">
								</div>
								<span style="color: red;">{{ errors.first('password') }}</span>
							</div>
							<div class="form-group">
								<label for="confirmPass">确认密码</label>
								<div class="controls">
									<input type="password" class="form-control" id="confirmPass" name="confirmPass"
									 data-vv-as="确认密码"  v-validate="{required:true,confirm:user2.password}">
								</div>
								<span style="color: red;">{{ errors.first('confirmPass') }}</span>
							</div>
							<div class="form-group">
								<label for="nickname">昵称</label>
								<div class="controls">
									<input type="text" class="form-control" id="nickname" name="nickname" v-model="user2.nickname"   >
								</div>
							</div>
							<div class="form-group">
								<label for="roleid">角色</label>
								<div class="controls">
									<select class="form-control" id="roleid" v-model="user2.roleid" >
										<option value="2">用户</option>
										<option value="3">跑单员</option>
									</select>
								</div>
							</div>
							<div class="form-group">
								<label for="phone">手机号</label>
								<div class="controls">
									<input type="text" class="form-control" id="phone" name="phone" v-model="user2.phone" data-vv-as="手机号"
									 v-validate="{required:true,regex:/^1[35678]\d{9}$/,useful:2}">
								</div>
								<span style="color: red;">{{ errors.first('phone') }}</span>
							</div>
							<div class="control-group">
								<label class="control-label">短信验证码：</label>
								<div class="controls">
									<input type="text" placeholder="短信验证码" class="form-control col-lg-5" style="width: 120px;"
										   v-model="user2.code" name="code"  v-validate="'required'" data-vv-as="验证码" >
									<button class="code-span" @click="createVerifyCode">
										   获取短信验证码
									</button>
								</div>
								<span style="color: red;">{{ errors.first('code') }}</span>
							</div>
						</div>
						<div class="modal-footer">
							<div class="form-group">
								<button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
								<button type="submit" class="btn btn-primary" @click="registerUser">提交</button>
							</div>
						</div>
					</div>
				</div>
			</div>
			
			
			
			<div id="myModal2" class="modal fade" tabindex="-1" role="dialog">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-body registerArea">
							<div class="form-group" style="text-align: center;">
								<label>
									<h2>手机号登录</h2>
								</label>
							</div>
							<div class="form-group">
								<label for="phone">手机号</label>
								<div class="controls">
									<input type="text" class="form-control" id="phone" name="phone" v-model="user2.phone" data-vv-as="手机号"
									 v-validate="{required:true,regex:/^1[35678]\d{9}$/,useful:2}">
								</div>
								<span style="color: red;">{{ errors.first('phone') }}</span>
							</div>
							<div class="control-group">
								<label class="control-label">短信验证码：</label>
								<div class="controls">
									<input type="text" placeholder="短信验证码" class="form-control col-lg-5" style="width: 120px;"
										   v-model="user2.code" name="code"  v-validate="'required'" data-vv-as="验证码" >
									<button class="code-span" @click="createVerifyCode">
										   获取短信验证码
									</button>
								</div>
								<span style="color: red;">{{ errors.first('code') }}</span>
							</div>
						</div>
						<div class="modal-footer">
							<div class="form-group">
								<button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
								<button type="submit" class="btn btn-primary" @click="registerUser2">登录</button>
							</div>
						</div>
					</div>
				</div>
			</div>
			
		</div>
	</body>
	<script type="text/javascript">
		Vue.use(VeeValidate, {
			events: 'blur',
			dictionary: {
				zh: {
					messages: {
						required: (field) => field + '不能为空！',
						min: (field, args) => field + '长度不能小于' + args[0],
						max: (field, args) => field + '长度不能大于' + args[0],
						alpha_dash: (field) => field + '只能包含数字、字母或下划线',
						regex: (field) => field + "格式不正确",
						is: () => "两次密码不一致"
					}
				}
			},
			locale: 'zh'
		});
		var vue=new Vue({
			el:"#app",
			data:{
				user:{},
				user2: {
					username: '',
					password: '',
					phone: '',
					code: '',
					roleid: '2'
				},
				loginUser:{},
				
				
			},
			created() {
				this.$validator.extend('useful', {
					getMessage(field, args, data) {
						return args[0] === '1' ? '用户名' + data : '手机' + data;
					},
					validate(value, args) {
						return new Promise(resolve => {
							axios.get("/user/check/" + value + "/" + args[0])
								.then(resp => {
									resolve({
										valid: resp.data,
										data: "已存在!"
									})
								})
						});
					}
				})
				this.$validator.extend('confirm', {
					getMessage() {
						return "两次密码不一致"
					},
					validate(val, args) {
						return val === args[0]
					}
				})
			},
			methods:{
				login:function(){
					// window.location.href="order.html";					
					 axios.post("http://localhost:10010/api/auth/accredit",this.user).then(resp => {
						// 已登录
						if(resp.status === 200){
							// alert("登陆成功")
							console.log("登录成功");
							// window.location.href="index.html"
							axios.post("http://localhost:10010/api/item/user/getUserByUser",this.user).then(function(response){
								this.loginUser=response.data;
								if(this.loginUser.roleid==2){
									window.location.href="userorder.html?id="+this.loginUser.userid;
								}else{
									window.location.href="ptorder.html?id="+this.loginUser.userid;
								}
							});
						}
					}).catch(() => {
						// 未登录
						alert("用户名或密码错误");
						this.user={};
					})
					
				},
				register:function(){
					$('#myModal').modal("show");
				},
				register2:function(){
					$('#myModal2').modal("show");
				},
				registerUser:function(){
					//不交互后台测试   以下三行 交互后可删
					console.log(this.user2);
					
					$("#myModal").modal("hide");
					
					 axios.post("http://localhost:10010/api/user/user/register",this.user2).then(function(){  
						 //点击注册中的提交后axios添加用户
						$("#myModal").modal("hide");
					}); 
				},
				registerUser2:function(){
					// window.location.href="order.html";
					 axios.post("http://localhost:10010/api/auth/accreditphone",this.user2).then(resp => {
						// 已登录
						if(resp.status === 200){
							// alert("登陆成功")
							console.log("登录成功");
							// window.location.href="index.html"
							axios.post("http://localhost:10010/api/item/user/getUserByUser",this.user2).then(function(response){
								this.loginUser=response.data;
								if(this.loginUser.roleid==2){
									window.location.href="userorder.html?id="+this.loginUser.userid;
								}else{
									window.location.href="ptorder.html?id="+this.loginUser.userid;
								}
							});
						}
					}).catch(() => {
						// 未登录
						alert("手机号或验证码错误");
						this.user3={};
					})
					
				},
				createVerifyCode:function(){
					// alert("获取短信验证码"+this.user2.phone);
					axios.get("http://localhost:10010/api/user/user/code?phone="+this.user2.phone).then(function(){
						
					}); 
				}
			}
			
		});
	</script>
</html>
